<template>
  <div class="home-contianer">
    <div>
      <div class="order-title">
        <h2>数量统计</h2>
      </div>
      <div
        data-v-542f4644
        class="ivu-row"
        style="padding: 15px; background: white"
      >
        <div
          v-for="item in topColor"
          :key="item.ItemName"
          class="ivu-col ivu-col-span-6"
          style="padding-left: 8px; padding-right: 8px"
        >
          <div
            data-v-542f4644
            class="ivu-card"
            :style="{ background: item.Background }"
          >
            <div class="icon-left">
              <i class="el-icon-wallet" />
            </div>
            <div class="ivu-card-body">
              <div class="demo-color-name">{{ item.ItemName }}</div>
              <div class="demo-color-desc">{{ item.Qty }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="order-title">
        <h2>工序信息</h2>
      </div>
      <div class="order-range">
        <div
          class="order-item"
          v-for="(item, index) in totalRange"
          :key="index"
        >
          <div class="total">
            <div class="number">
              {{ item.ProcessName }}
            </div>
          </div>
          <!-- <div class="name">{{item.ProcessName }}</div> -->
          <div class="date">计划数:{{ item.PlanQty }}</div>
          <div class="date">良品数:{{ item.GoodQty }}</div>
          <div class="date">不良品数:{{ item.NoGoodQty }}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="home-contianer">
    <div class="h-chart">
      <div id="h-chart2"></div>
      <div id="h-chart3"></div>
    </div>
  </div>
  <div class="home-contianer">
    <div class="h-chart">
      <!-- <div class="h-left-grid">
        <div @click="open(item)" class="item" v-for="(item, index) in grid" :key="index">
          <div class="icon-text" style="margin-bottom:-15px">
            <span class="name" style="margin-top:20px;">{{ item.name }}</span>
          </div>
          <i :class="item.icon" ></i>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div> -->
      <div class="h-top-center" style="width: 100%">
        <div class="n-item">
          <div
            @click="openRouterUrl(item)"
            class="item"
            :class="'item' + (index + 1)"
            v-for="(item, index) in center"
            :key="index"
          >
            <i
              style="font-size: 30px; padding-bottom: 10px"
              :class="item.icon"
              :size="20"
            ></i>
            <br />
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import * as echarts from "echarts";
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'

import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/grid'
let echarts = require('echarts/lib/echarts')
import { chart2, chart3 } from './home/home-chart-options'
import { ref, onMounted, onUnmounted } from 'vue'
var $chart2
export default {
  components: {},
  data() {
    return {
      beginDate: '',
      endDate: '',
      topColor: [],
      totalRange: [],
      titleLeft: '',
      dateNow: '',
      center: [
        {
          title: '员工绩效',
          icon: 'el-icon-s-data',
          url: '/View_EmployeePerformance',
        },
        {
          title: '工资报表',
          icon: 'el-icon-s-data',
          url: '/View_SalaryReport',
        },
        {
          title: '不良品项分布',
          icon: 'el-icon-s-data',
          url: '/View_DefectItemDistribute',
        },

        {
          title: '不良品项汇总',
          icon: 'el-icon-s-data',
          url: '/View_DefectItemSummary',
        },

        {
          title: '生产报表',
          icon: 'el-icon-s-data',
          url: '/View_ProductionReport',
        },
        {
          title: '产量统计',
          icon: 'el-icon-s-data',
          url: '/View_OutputStatistics',
        },
      ],
      contectcenter: [
        {
          title: '员工绩效',
          icon: 'el-icon-s-data',
          url: '/View_EmployeePerformance',
        },
        {
          title: '工资报表',
          icon: 'el-icon-s-data',
          url: '/View_SalaryReport',
        },
        {
          title: '不良品项分布',
          icon: 'el-icon-s-data',
          url: '/View_DefectItemDistribute',
        },
      ],
      n: 90,
      value1: '1',
      list: [], //版本发布记录
      grid: [
        {
          name: '智能车间生产管控看板',
          desc: '车间全方位生产信息展示。',
          url: 'http://board.625sc.com:9095/index.html#/aj/bP3fTAG8',
          icon: 'el-icon-s-marketing',
        },
        {
          name: '工单执行进度看板',
          desc: '工单执行全周期信息展示。',
          url: 'http://board.625sc.com:9095/index.html#/aj/2kEYF9UY',
          icon: 'el-icon-s-marketing',
        },
        {
          name: '紧锣密鼓的开发中',
          desc: '待添加',
          url: '#',
          icon: 'el-icon-s-marketing',
        },
      ],
    }
  },
  methods: {
    getDate() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      var hour = date.getHours()
      var minutes = date.getMinutes()
      var second = date.getSeconds()
      this.beginDate =
        year +
        '-' +
        (month < 10 ? '0' + month : month) +
        '-' +
        (day < 10 ? '0' + day : day)
      this.endDate = this.beginDate
      this.dateNow = this.beginDate
    },
    getTopNumber() {
      let urlWo = 'api/Production_WorkOrder/getHomeStatisticsNumber'
      //给工序名称重新绑定数据源
      this.http.get(urlWo, {}, true).then((result) => {
        this.topColor = result
      })
    },
    getVersionInfo() {
      let urlWo = 'api/Sys_VersionInfo/getVersionInfo'
      //给工序名称重新绑定数据源
      this.http.get(urlWo, {}, true).then((result) => {
        this.list = result
      })
    },
    getTopProcessNumber() {
      let urlWo = 'api/Production_WorkOrder/getHomeProcessNumber'
      //给工序名称重新绑定数据源
      this.http.get(urlWo, {}, true).then((result) => {
        this.totalRange = result
      })
    },
    search() {
      if (this.dateNow == this.beginDate && this.dateNow == this.endDate) {
        this.titleLeft = '今日'
      } else {
        this.titleLeft = '当期'
      }
    },
    openRouterUrl(item) {
      this.$tabs.open({
        text: item.title,
        path: item.url,
        query: {},
      })
    },
  },
  created() {
    this.getDate()
    this.getTopNumber()
    this.getTopProcessNumber()
    this.getVersionInfo()
    this.http
      .get('api/Base_Process/getAppHomeProcessTop5', {}, true)
      .then((result) => {
        let categories = result.map((item) => item.name)
        let data = result.map((item) => item.data)
        chart2.xAxis[0].data = categories
        chart2.series[0].data = data
        $chart2 = echarts.init(document.getElementById('h-chart2'))
        $chart2.setOption(chart2)
      })

    this.http
      .get('api/Base_DefectItem/getAppHomeDefectValue', {}, true)
      .then((item) => {
        let dataDefect = item.map((key) => ({
          name: key.name,
          value: key.data,
        }))
        chart3.series[0].data = dataDefect
        $chart3 = echarts.init(document.getElementById('h-chart3'))
        $chart3.setOption(chart3)
      })
  },
  setup() {
    let open = (item) => {
      window.open(item.url, '_blank')
    }
    let interval
    onMounted(() => {})
    onUnmounted(() => {
      interval && clearInterval(interval)
      if ($chart) {
        $chart.dispose()
        $chart2.dispose()
        $chart3.dispose()
      }
    })
    return { open }
  },
  destroyed() {
    $chart2 = null
  },
}
var $chart, $chart2, $chart3
// window.addEventListener("resize", function () {
//   $chart2.setOption(chart2);
// });
</script>
<style lang="less" scoped>
.home-contianer {
  padding: 6px;
  background: #eee;
  width: 100%;
  height: 100%;
  // max-width: 800px;
  // position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;

  .h-top {
    display: flex;
    .h-top-left {
      height: 100%;
      width: 300px;
      background: white;
    }
    height: 300px;
  }
  .h-top > div {
    border: 1px solid #e8e7e7;
    border-radius: 5px;
    // margin: 6px;
  }
  .h-top-center {
    height: 100%;
    background: white;
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    .item1 .num {
      padding-top: 28px;
    }
    .item2 .num {
      padding-bottom: 20px;
    }

    .n-item {
      width: 100%;
      height: 100%;
      text-align: center;
      cursor: pointer;
      // display: flex;
      .item {
        border-right: 1px solid #e5e5e5;
        width: 33.3333333%;
        float: left;
        height: 50%;
        border-bottom: 1px solid #e5e5e5;
        padding: 47px 0;
        font-size: 13px;
      }
      .item:hover {
        background: #f9f9f9;
        cursor: pointer;
      }
      .item:last-child {
        border-right: 0;
      }
      .item3,
      .item6 {
        border-right: 0;
      }
      .num {
        word-break: break-all;
        color: #282727;
        font-size: 30px;
        transition: transform 0.8s;
      }
      .num:hover {
        color: #55ce80;
        transform: scale(1.2);
      }
      .text {
        font-size: 13px;
        color: #777;
      }
    }
  }
  .h-top-right {
    // flex: 1;

    width: 20%;
    height: 100%;
    background: white;
  }
  .h3 {
    padding: 7px 15px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px dotted #d4d4d4;
  }
}
.task-table {
  table {
    width: 100%;
    .thead {
      font-weight: bold;
    }
    tr {
      cursor: pointer;
      td {
        border-bottom: 1px solid #f3f3f3;
        padding: 9px 8px;
        font-size: 12px;
      }
    }
    tr:hover {
      background: #eee;
    }
  }
}
.h-chart {
  height: 340px;
  margin: 6px 0px;
  display: flex;
  .h-left-grid {
    width: 16%;
    height: 100%;
    background: white;
    display: inline-block;
    .name {
      margin-left: 40px;
    }
    .item:hover {
      background: #f9f9f9;
      cursor: pointer;
    }
    .item {
      padding: 30px 30px;
      float: left;
      width: 99%;
      height: 33.33333%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      i {
        font-size: 30px;
      }
      .desc {
        font-size: 12px;
        color: #2b2525;
        padding: 0px 0 0 40px;
        line-height: 1.5;
        margin-top: -10px;
      }
    }
  }
}
#h-chart2 {
  border-radius: 3px;
  background: white;
  padding-top: 10px;
  height: 100%;
  width: 0;
  flex: 1;
  margin: 0 7px;
}
#h-chart3 {
  border-radius: 3px;
  padding: 10px 10px 0 10px;
  background: white;
  // padding-top: 10px;
  height: 100%;

  width: 600px;
}

.ivu-card-body {
  text-align: center;
  padding: 20px 5px;
  /* padding-left: 80px; */
  font-size: 16px;
}
.demo-color-name {
  color: #fff;
  font-size: 14px;
}
.demo-color-desc {
  color: white;
  /* opacity: 0.7; */
  font-size: 20px;
  margin-top: 2px;
}
.ivu-card {
  box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
  display: flex;
  position: relative;
  padding-top: 10px;
  border-radius: 5px;
}
.ivu-card .icon-left {
  width: 85px;
}
.ivu-card .ivu-card-body {
  flex: 1;
}
.ivu-card .icon-left {
  text-align: center;
  border-right: 1px solid;
  padding: 8px 0px;
  height: 100%;

  font-size: 50px;
  color: white;
}
.ivu-row {
  border-bottom: 2px dotted #eee;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
}

.ivu-row > div {
  flex: 1;
}

.h5-desc {
  padding-top: 10px;
}
</style>

<style lang="less" scoped>
.jn-day-total {
  display: flex;
  padding: 15px;
  background: white;
  .date-text {
    line-height: 36px;
    padding: 0 15px;
  }
  .date {
    margin-right: 20px;
  }
  .btn {
    margin-left: 10px;
  }
}
.order-title {
  h2 {
    padding: 7px 15px;
    font-weight: 500;
    background: white;
    border-bottom: 1px dotted #d4d4d4;
  }
}

.order-range {
  padding: 0 15px;
  background: white;
  background: white;
  display: flex;
  // flex-direction: row-reverse;
}

.order-range .order-item {
  box-shadow: 0 3px 13px rgba(117, 114, 114, 0.47);
  flex: 1;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #e6e6e6;
  margin: 7px;
}

.order-range .total {
  color: white;
  font-size: 30px;
  font-weight: bold;
  line-height: 60px;
  background: #55ce80;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.order-range .number {
  transition: transform 0.8s;
}
.order-range .number:hover {
  cursor: pointer;
  transform: scale(1.2);
}
.order-range .name {
  font-size: 20px;
  padding: 10px;
}

.order-range .date {
  padding: 1px 0 5px 0;
  color: #282727;
  font-size: 15px;
}
</style>

<style lang="less" scoped>
.numbers {
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  background: white;
  display: flex;

  padding: 20px 0px;
  .item {
    flex: 1;
    text-align: center;
    border-right: 1px solid #e5e5e5;
  }
  .item > 　div:first-child {
    word-break: break-all;
    color: #282727;
    font-size: 30px;
    // padding-bottom: 12px;
  }
  .item > 　div:last-child {
    font-size: 13px;
    color: #777;
  }
  .item:last-child {
    border-right: none;
  }
  .number {
    cursor: pointer;
    transition: transform 0.8s;
  }
  .number:hover {
    transform: scale(1.2);
    color: #03c10b !important;
  }
}
</style>
